<template>
  <div class="collect-block" @click="toAnimeMain(data.id)">
    <div ref="picbox" class="pic" :style="{ height: picheight + 'px' }">
      <BaseImg :src="data.cover" />
    </div>
    <div class="title">
      <h4>{{ data.animeTitle }}</h4>
      <span>每{{ preweek }}更新-已连载至{{ data.anthologys }}集</span>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

import BaseImg from '@comps/Global/BaseImg.vue'

import { useResizeListening } from '@/hook/utils'
import { UseWeekStore } from '@/stores/utils'
import { toAnimeMain } from '@/router/jump'
export default {
  name: 'CollectBlcok',
  components: {
    BaseImg
  },
  props: {
    data: {
      default: []
    }
  },
  setup(props) {
    const picbox = ref(null)
    const useweek = UseWeekStore()
    let picheight = ref()
    useResizeListening(picbox, () => {
      picheight.value = picbox.value.clientWidth * 1.333
    })

    const preweek = computed(() => {
      return useweek[new Date(props.data.publishYear).getDay()]
    })

    return {
      picbox,
      picheight,
      preweek,
      toAnimeMain
    }
  }
}
</script>

<style lang="scss" scoped>
.collect-block {
  .pic {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
  }
  .title {
    .overflow {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    h4 {
      @extend .overflow;
      font-size: 14px;
      color: $font;
      font-weight: 400;
    }
    span {
      display: inline-block;
      @extend .overflow;
      font-size: 12px;
      color: $font_unactive;
    }
  }
}
</style>
